<template>
	<view class="">
		<view class="">
			<view class="wraps">
				<view class="hearImage">
					<image mode="aspectFit" class="backfroundImage" src="/static/aidex/images/0e159d0c339c2ce523d4d57fc50e50c.png"></image>
				</view>
				<!-- <view class="headInfo">
					<text>个人中心</text>
				</view> -->
				<view class="topTitle">
					<!-- <image :src="avatarUrl"></image> -->

					<view class="headInfo headPhoto" @click="isShowPopup">
						<!-- <u-avatar size="100" src="/static/aidex/images/user01.png"></u-avatar> -->
						<u-avatar class="avatar" size="100" :src="imageBase64"></u-avatar>
					</view>

					<!--            弹窗容器-->
					<view class="headInfo" id="imagePopup"
						style="display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);">
						<img id="popupImage" src="" style="width: 600rpx; height: 600rpx;">
						<span id="closeButton" @click="closePopup()"
							style="position: absolute; top: 0; right: 0; background-color: #fff; color:black; padding: 5px;"><strong>X</strong></span>
					</view>
				</view>
				<view class="info">
					<view class="item">
						<text space="ensp">昵称: </text><text>{{userName}}</text>
					</view>
					<view class="item">
						<text space="ensp">所属厂站: </text><text>{{orgainName}}</text>
					</view>
					<view class="item">
						<text space="ensp">角色: </text><text>{{role}}</text>
					</view>
				</view>
			</view>
			<view class="exitButton">
				<u-button :ripple="true" class="buttonExit" ripple-bg-color="#909399" type="primary"
					@click="logout">退出账号</u-button>
			</view>
		</view>

		<!-- pop弹出层 -->
		<view class="dialog">
			<u-popup v-model="show" mode="bottom" height="30%" border-radius="14" @close="close"
				:mask-close-able="false">
				<view class="list" @click="updateHeadPortrait">
					<text>更换头像</text>
				</view>
				<view class="list" @click="viewPhoto">
					<text>查看大图</text>
				</view>
				<view class="list" @click="close">
					<text>取消</text>
				</view>
			</u-popup>
		</view>
	</view>
</template>
<script>

	export default {
		data() {
			return {
				iconSize: 38,
				userName: 'user',
				orgainName: 'station',
				role: 'user',
				imageBase64: '',
				show: false,
				imageData64: ''
			};
		},
		// computed: {
		// 	avatarUrl() {
		// 		// let url = this.vuex_user.avatarUrl || '/ctxPath/static/images/user1.jpg';
		// 		// url = url.replace('/ctxPath/', this.vuex_config.baseUrl + '/');
		// 		let url = this.vuex_config.baseUrl + this.vuex_user.avatar || '/static/aidex/tabbar/my_2.png';
		// 		url = this.replaceAll(url, '\\', '/');
		// 		return url + '?t=' + new Date().getTime();
		// 	}
		// },
		onLoad: {

		},

		methods: {
			navTo(url) {
				uni.navigateTo({
					url: url
				});
			},
			//退出登录
			logout() {
				uni.removeStorageSync('token');
				uni.removeStorageSync('uuid');
				// sessionStorage.removeItem("token");
				// sessionStorage.removeItem("uuid");
				setTimeout(() => {
					uni.reLaunch({
						url: '/pages/sys/login/index'
					});
				}, 500);
			},
			isShowPopup() {
				this.show = !this.show;
			},
			close() {
				this.show = false;
			},
			//显示图片弹框
			toggleImageSize(url) {
				var popup = document.getElementById('imagePopup');
				var image = popup.getElementsByTagName('img')[0];
				image.src = url;
				popup.style.display = 'block';
			},
			//查看大图
			viewPhoto() {
				this.show = false;
				let url = this.imageBase64;
				this.toggleImageSize(url);
				console.log("大图")
			},
			//关闭放大的图片
			closePopup() {
				var popup = document.getElementById('imagePopup');
				popup.style.display = 'none';
				console.log("关闭")
			},
			//更换头像
			updateHeadPortrait() {
				this.$u.route({
					url: '/uview-ui/components/u-avatar-cropper/u-avatar-cropper',
					params: {
						destWidth: 200, // 输出图片宽高
						rectWidth: 200, // 裁剪框的宽高
						fileType: 'jpg', // 输出的图片类型，如果'png'类型发现裁剪的图片太大，改成"jpg"即可
					}
				})
				this.$u.api.updateHeadPhoto({
						"algorithmProcessId": "update_image",
						"param": {
							"data": {
								"image_base64": this.imageData64
							}
						}
					})
					.then(result => {
						console.log("头像更新成功")
					});
			}
		},
		onTabItemTap: function(e) {
			console.log("跳转了", e)
			let name = sessionStorage.getItem('username');
			console.log("当前用户名字", name);
			//获取当前登录用户信息
			this.$u.api.userInfo({
					"algorithmProcessId": "getUserName",
					"param": {
						"data": {
							"userName": sessionStorage.getItem('username')
						}
					}
				})
				.then(result => {
					console.log("用户", result);
					this.userName = result.data.data.result[1].name;
					this.orgainName = result.data.data.result[1].resultcz;
					this.role = result.data.data.result[1].resultRole;
					let images = result.data.data.result[1].image_base64;
					var img = new Image();
					img.src = images;
					this.imageBase64 = img.src;
					this.imageData64 = images;
				});
		}

	};
</script>
<style lang="scss">
		@import '../style/index.scss';

	page {
		background-color: #f5f5f5;
	}

	.wraps {
		position: relative;
		height: 900rpx;

		.headInfo {
			position: absolute;
			top: 100rpx;
			left: 330rpx;
		}

		.info {
			position: absolute;
			top: 500rpx;
			text-align: left;
			padding-left: 30rpx;

			.item {
				border-bottom: 1rpx solid gray;
				height: 100rpx;
				line-height: 100rpx;

				text {}
			}
		}

	}

	.topTitle {
		//transform: translate(45%);
		width: 50%;
		margin: 0 auto;

		.headInfo {
			text-align: center;

		}
	}

	.exitButton {
		width: 80%;
		margin: 0 auto;
		// height: 600rpx;
		// position: relative;

		.buttonExit {
			background-color: orange;
			color: white;
			// position: absolute;
			// top: 5rpx;
		}
	}

	.info {
		width: 100%;

		.item {}
	}

	.dialog {
		display: flex;
		align-items: center;
		justify-content: center;

		.list {
			border-radius: 25rpx;
			width: 100%;
			border-bottom: 1rpx solid gray;
			text-align: center;
		}
	}

	.hearImage {
		height: 300rpx;

		image {
			width: 100%;
		}
	}
</style>